<template>
    <div class="voLayout">
        <tg-tags :tagArr="video" @changeData="changeTags">
            <template #title>
                <span>TA的视频</span>
            </template>
        </tg-tags>
        <tg-kinds :list="kinds"  @changeData="changeKinds" :total="allKindsTotal"></tg-kinds>
        <!-- <div class="videoBox" v-loading="loading" element-loading-text="Loading..." element-loading-background="white">
            <p v-for="item in info?.vlist" :key="item.aid">
                <up-video-item
                    :bvid="item.bvid"
                    :aid="item.aid"
                    :mid="item.mid"
                    :created="item.created"
                    :title="item.title"
                    :play="item.play"
                    :length="item.length"
                    :pic="item.pic"
                ></up-video-item>
            </p>
        </div> -->
        <ul class="lineVideoBox" v-loading="loading" element-loading-text="Loading..." element-loading-background="white">
            <li v-for="item in info?.vlist" :key="item.aid">
                <line-up-video-item
                    :bvid="item.bvid"
                    :aid="item.aid"
                    :mid="item.mid"
                    :created="item.created"
                    :title="item.title"
                    :play="item.play"
                    :pic="item.pic"
                    :desc="item.description"
                    :danmaku="item.video_review"
                ></line-up-video-item>
            </li>
        </ul>
        <div class="pagination">
            <el-config-provider :locale="zhCn">
                <el-pagination  background 
                                layout="prev, pager, next, jumper" 
                                :current-page="pageVal.size"
                                :total="pageVal.total" 
                                :default-page-size="30" 
                                prev-text="上一页"
                                next-text="下一页"
                                @current-change="changePage"/>
            </el-config-provider>
        </div>
    </div> 
</template>

<script lang="ts" setup>
import { tgTags,tgKinds, upVideoItem, lineUpVideoItem } from '@/pages/up/components'
import { get } from '@/http/axios'
import { useStore } from 'vuex'
import { getWbiKeys,encWbi } from '@/api/getVideo'
import { onBeforeMount, reactive, ref } from 'vue'
import { changePagTotal, countTotal } from './index'
import { useRouter } from 'vue-router'
import { baseRouteGetStatus, changeNowRoute } from '@/router/changeUrl'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

interface Props{
    mid:string
}
const props = defineProps<Props>()
const video = reactive([
    { title:'最新发布',label:'pubdate' },
    { title:'最多播放',label:'click' },
    { title:'最多收藏',label:'stow' }
])
const pageVal = reactive({
    size:1,
    total:0,
})
const allKindsTotal = ref<number>(0)
const store = useStore()
let info = ref()
let kinds = ref()
let loading = ref<boolean>(true)
const router = useRouter()
const map = new Map()
onBeforeMount(() =>{
    baseRouteGetStatus(router,map)
    initData()
    if (map.has('pn')) pageVal.size = Number(map.get('pn'))
})
function initData(){
    info.value = []
    loading.value = true
    const obj = changeNowRoute(router,map)
    const wbi_keys = getWbiKeys(store)
    const query = encWbi(
        {
            mid:props.mid,
            tid:0,
            pn:1,
            ps:30,
            keyword:'',
            order:'pubdate',
            order_avoided:'true',
            platform:'web',
            web_location:'1550101',
            ...obj
       },
            wbi_keys.img_key, 
            wbi_keys.sub_key
       )
    get('/x/space/wbi/arc/search?' + query).then(res => {
        console.log('video', res.data);
        
        loading.value = false
        info.value = res.data.list
        kinds.value = Array.from(Object.values(res.data.list.tlist))
        allKindsTotal.value = countTotal(kinds.value)
        pageVal.total = changePagTotal(kinds.value,map.get('tid'), allKindsTotal.value)
    }).catch(er => {
        alert('投稿video数据加载失败')
    })
}
function changePage(pn:number) {
    map.set('pn', pn)
    pageVal.size = pn
    initData()
}
function changeTags(order:string) {
    map.set('order', order)
    map.set('pn', 1)
    pageVal.size = 1
    initData()
}
function changeKinds(tid:string | number) {
    map.set('tid', tid)
    map.set('pn', 1)
    pageVal.size = 1
    initData()
}
</script>

<style lang="scss" scoped>
@import url(../../assets/css/changePagintoin.scss);
.voLayout{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}
.videoBox{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
    min-height: 175px;
    overflow: hidden;
    & p{
        width: calc(( 100% - 20px * 4 ) / 5);
        overflow: hidden;
        height: 175px;
    }
}
.lineVideoBox{
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
    min-height: 175px;
    overflow: hidden;
    & li {
        width: 100%;
    }
}
</style>